<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="cardsBalance h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#ffffff" color="#000000" title="次卡套餐" left-icon="left" @clickLeft="back" />
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="contentWithFooter" :style="contentWithFooterStyle">
        <view class="w100p cardBox">
          <image :src="cardUrl" mode="aspectFit" class="cardUrl" />
          <view class="cardLabel flb w100p h100p">
            <view class="el1 psas cWH f14 h20 l20 mr6">当前可用次数</view>
            <view class="el2 psas cWH">
              <text class="f48 h48 l48">{{ globalData.userInfo.cardsBalance || 0 }}</text>
              <text class="f14 h20 l20">次</text>
            </view>
            <view class="el3 psas cWH h48 flr" @click="jumpToPage('/pages/my/cardsDetails')">
              <text class="mr2">{{ '查看详情' }}</text>
              <uni-icons type="right" size="18" color="#fff" />
            </view>
            <view class="el4 psas cWH f14 l20 h20">注：次卡可用于查看需求联系方式和发布销售需求，次卡有效期为1年，若过期未使用将会作废</view>
          </view>
        </view>
        <view class="flc">
          <view v-for="(item, index) in cardList" :key="index" @click="cardItemClick(index)" class="cardItem flr" :class="[index === curIdx ? 'activeItem' : '']">
            <view class="left">
              <view class="flr h32">
                <image src="/static/img/my/buy.png" mode="aspectFit" class="mr6 w32 h32" />
                <view class="cGY3 f18 h32 l32">{{ item.lb1 }}</view>
              </view>
              <view class="cGY2 f14 h32 l32">{{ item.lb2 }}</view>
            </view>
            <view class="right cYE">{{ item.lb3 }}</view>
          </view>
        </view>
        <view class="payLabel cBL f14 mt10">购买须知</view>
        <view class="flc cGY1 f14 l24">
          <text class="cGY1 f14">1.次卡套餐购买后立即生效，在1年有效期内您可享受一定次数的拨打电话权益。</text>
          <text class="cGY1 f14">2.如您已拥有次卡套餐权益，购买次卡套餐后，权益可叠加享受</text>
          <text class="cGY1 f14">3.该产品属于数字化商品，购买后不支持退款。</text>
          <text class="cGY1 f14">4.该产品生效时间从支付成功起，至有效期截止当日24时止。</text>
          <text>
            5.如您需要更多咨询，可拨打
            <text class="cYE">{{ globalData.platformInfo.CUSTOMER_SERVICE_TEL }}</text>
            。
          </text>
        </view>
      </view>
      <FixedBottomBtn v-if="showFixedBottom" :hasBottom="hasBottom" lb1="付费即代表同意" lb2="《E商机用户充值协议》" @btnFun="submit" />
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
export default {
  mixins: [commonMxins],
  data() {
    return {
      formData: { wechatPayType: '2', qty: '', platform: '1' },
      hasBottom: true,
      uid: 0,
      showFixedBottom: true,
      curItem: '',
      cardList: [],
      orderNo: '',
      curIdx: 0
    };
  },
  components: { FixedBottomBtn },
  onLoad() {
    this.queryCardsPackage(); //查询次卡套餐
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async queryCardsPackage() {
      let res = await api.request({ url: '/platformSetting/queryCardsPackage', method: 'get' });
      res.data.forEach(el => {
        let list = el.settingValue.split(';');
        el.num = list[0];
        el.lb1 = `购买${list[0]}次`;
        let sheng = Number(list[0]) * Number(list[1]) - Number(list[3]);
        el.lb2 = `联系${list[0]}次，省${sheng}，折算每次约${(list[3] / list[0]).toFixed(2)}元`;
        el.lb3 = `￥ ${list[3]}`;
      });
      this.cardList = res.data;
      this.formData.qty = this.cardList.length > 0 ? this.cardList[0].num : 0;
    },
    cardItemClick(idx) {
      this.curIdx = idx;
      this.formData.qty = this.cardList[idx].num;
    },
    async submit() {
      if (!this.curItem) {
        let res = await api.request({ url: '/wechatPay/initWechatPay', data: this.formData });
        this.orderNo = res.data.orderNo;
        let t = this;
        wx.requestPayment({
          ...res.data,
          success(r) {
            t.queryOrderStatus();
          },
          fail() {
            uni.showToast({ title: '支付失败', icon: 'none' });
          }
        });
      } else {
        uni.showToast({ title: '请先选择', icon: 'none' });
      }
    },
    async queryOrderStatus() {
      clearTimeout(this.uid);
      let res = await api.request({ url: '/wechatPay/queryByOrderNo', data: { orderNo: this.orderNo }, method: 'get' });
      if (res.data.thirdOrderStatus === '2') {
        uni.showToast({ title: '支付成功', icon: 'success', duration: 2000 });
        this.getUserInfo();
      } else if (res.data.thirdOrderStatus === '1') {
        this.uid = setTimeout(() => {
          this.queryOrderStatus();
        }, 1000);
      }
    },
    getImgUrl(list) {
      this.formData.cardUrl = list.join(',');
    }
  }
};
</script>
<style lang="scss" scoped>
.cardsBalance {
  .contentBox {
    position: relative;
    .contentWithFooter {
      padding: 0 12rem;
      box-sizing: border-box;
      .cardBox {
        height: 164rem;
        padding: 12rem 0;
        box-sizing: border-box;
        position: relative;
        .cardUrl {
          height: 140rem;
          width: 100%;
          border-radius: 10rem;
          background: linear-gradient(90deg, rgba(252, 123, 12, 1) 0%, rgba(251, 162, 77, 1) 100%);
          box-shadow: 0rem 5rem 6rem rgba(0, 0, 0, 0.2);
        }
        .cardLabel {
          position: absolute;
          top: 0;
          left: 0;
          .el1 {
            top: 56rem;
            left: 18rem;
          }
          .el2 {
            top: 28rem;
            left: calc(50% - 90rem);
            width: 180rem;
            text-align: center;
          }
          .el3 {
            top: 56rem;
            right: 22rem;
          }
          .el4 {
            top: 90rem;
            left: 18rem;
            right: 20rem;
          }
        }
      }
      .payLabel {
        height: 24rem;
        line-height: 24rem;
      }
      .cardItem {
        height: 90rem;
        margin-top: 10rem;
        border: 1rem solid rgba(255, 232, 212, 1);
        box-sizing: border-box;
        border-radius: 10rem;
        width: 100%;
        padding: 13rem 20rem;
        background: #fffbf7;
        .left {
          height: 90rem;
          border-top-left-radius: 10rem;
          border-bottom-right-radius: 10rem;
          width: calc(100% - 90rem);
        }
        .right {
          height: 90rem;
          border-bottom-left-radius: 10rem;
          border-bottom-right-radius: 10rem;
          width: 90rem;
          font-size: 24rem;
          line-height: 64px;
        }
      }
      .activeItem {
        border: 1rem solid #ff7c00;
        .activePrice {
          background: #ff7c00;
          color: white;
        }
      }
    }
  }
}
</style>
